<template>
  <section class="write-diary">
    <div class="inner">
      <simple-title :title="'发布日记'" :show="false"></simple-title>
      <div class="content">
        <Form :model="formItem" :label-width="80">
          <FormItem label="日记标题：">
            <Input v-model="formItem.name" placeholder="新建日记请输入完整的标题，完善日记可点击右边的三角，在日记列表中选择"></Input>
          </FormItem>
          <FormItem label="记录时间：">
            <Row>
              <Col span="11">
                <DatePicker type="date" placeholder="Select date" v-model="formItem.date" @on-change="handleChange" ></DatePicker>
              </Col>
              (术后第 <span class="pink">0</span> 天)
            </Row>
          </FormItem>
          <FormItem label="手术医院：">
            <Input v-model="formItem.hospital" placeholder="" style="width: 300px"></Input>
          </FormItem>
          <FormItem label="手术医生：" style="width: 500px" placeholder="可直接选择，如列表中找不到，可以直接输入">
            <Input v-model="formItem.doctor" placeholder="" style="width: 300px"></Input>
          </FormItem>
          <FormItem label="预约价格：">
            <Input v-model="formItem.yprice"  style="width: 200px" placeholder="输入价格..."></Input>
          </FormItem>
          <FormItem label="折扣：">
            <Input v-model="formItem.sale" style="width: 200px" placeholder="折扣..."></Input>
          </FormItem>
          <FormItem label="医院价格：">
            <Input v-model="formItem.yiprice" style="width: 200px" placeholder="医院价格..."></Input>
          </FormItem>
          <FormItem label="插入照片：">
            <Upload style="display: inline-block"  :action="UploadUrl()" :on-success="one">
              <img :src="images.one" alt="">
            </Upload>
            <Upload style="display: inline-block" :action="UploadUrl()" :on-success="two">
              <img :src="images.two" alt="">
            </Upload>
            <Upload style="display: inline-block" :action="UploadUrl()" :on-success="tree">
              <img :src="images.three" alt="">
            </Upload>
            <p>为了更好的展示日记的美观，写日记时，首次插入的照片为术前照片，后期插入的为每个恢复阶段的照片，这样才能起到前后对比的效果！</p>
          </FormItem>
          <FormItem label="正文：">
            <div id="editorElem"></div>
            <!--<Input v-model="formItem.content" type="textarea" :autosize="{minRows: 4}" placeholder="日记正文..."></Input>-->
          </FormItem>
          <FormItem label="购买项目：">
              <Select v-model="formItem.pro" style="width:150px;margin-right: 5px" @on-change="selpro">
                <Option v-for="item in proList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
              </Select>
              <Select v-model="formItem.city" style="width:150px;margin-right: 5px" @on-change="selcity">
                <Option v-for="item in cityList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
              </Select>
              <Select v-model="formItem.dis" style="width:150px" @on-change="selc">
                <Option v-for="item in disList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
              </Select>
             <span @click="add" class="add">添加</span>
              <Input v-model="text" style="width: 450px;margin-top: 5px" placeholder=""></Input>
          </FormItem>
          <FormItem label="术后症状：">
            <p>术后症状的描述以利于正价用户对该项目的深入了解！</p>
            <p><span class="pink">添加详细症状<Icon type="ios-arrow-down" /></span></p>
            <div class="clearfix">
                <span class="float-left">症状：</span>
              <div class="selected-box float-left" style="width: 520px;margin-left: 20px">
              <span class="item"
                    :class="{active: i.check}"
                    v-for="i in list"
                    :key="i.id"
                    @click="i.check = !i.check">
                      {{i.name}}
              </span>
              </div>
            </div>
            <div>
              <p class="rate"><span>满意度：</span> <Rate  v-model="satisfied" icon="md-happy" /> <span>非常满意</span></p>
              <p class="rate"><span>肿胀度：</span> <Rate  v-model="swelling" icon="ios-water" /> <span>完全不肿</span></p>
              <p class="rate"><span>疼痛感：</span> <Rate  v-model="pain" icon="ios-pulse" /> <span>完全不疼</span></p>
              <p class="rate"><span>疤痕度：</span> <Rate  v-model="scar" icon="ios-heart" /> <span>完全无痕</span></p>
            </div>
          </FormItem>
          <FormItem label="日记返现：">
            <Input v-model="formItem.diaryBack" style="width: 500px" placeholder="眼整形北京萌宠日系下至+微笑内眼角 日记返现500元！"></Input>
            <span class="pink">&nbsp;&nbsp;&nbsp;商业用户专项</span>
              <Checkbox label="" v-model="checked">勾选开启积分阅读权限，需要支付 20 积分才能阅读完整日记。</Checkbox>
              <Checkbox label="" v-model="checked1">勾选关闭评论 关闭评论后，该日记只能阅读，评论功能将被隐藏。</Checkbox>
              <Checkbox label="" v-model="checked2">勾选禁止转载 选择后改日记将被禁止转载</Checkbox>
            同步至
            <CheckboxGroup v-model="formItem.target">
              <Checkbox label="新浪微博"></Checkbox>
              <Checkbox label="微信朋友圈"></Checkbox>
              <Checkbox label="QQ空间"></Checkbox>
              <Checkbox label="我的圈子"></Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem>
            <Button type="primary" style="width: 200px" @click="subimt">发布</Button>
          </FormItem>
        </Form>
      </div>
    </div>
  </section>
</template>

<script>
    import E from 'wangeditor'
import SimpleTitle from '../../../components/Title/SimpleTitle'
export default {
  name: 'WriteDiary',
  components: {
      SimpleTitle
  },
   data () {
      return {
          formItem: {},
          satisfied:0,
          swelling:0,
          pain:0,
          scar:0,
          list: [
              {id:1, name: '轻微肿胀', check: false},
              {id:2, name: '严重肿胀', check: false},
              {id:3, name: '伤口疼痛', check: false},
              {id:4, name: '伤口发红', check: false},
              {id:5, name: '伤口发痒', check: false},
              {id:6, name: '伤口青紫', check: false},
              {id:7, name: '疤痕增生', check: false},
              {id:8, name: '疤痕明显', check: false},
              {id:9, name: '伤口渗血', check: false},
              {id:10, name: '术区化脓', check: false}
          ],
          disList:[],
          proList:[],
          cityList:[],
          images:{
              one:require('./img/front.png'),
              two:require('./img/side45.png'),
              three:require('./img/side.png')
          },
          imglist:'',
          pid:0,
          city:'',
          dis:'',
          por:'',
          idlist:'',
          text:'',
          checked:false,
          checked1:false,
          checked2:false,
          diary_id:'',
          id:"",
          editorContent:'',

      }
   },
    created () {
        this.adrass()
    },
    methods: {
        adrass () {
            let _this =this
            this.$post('/api/project/project_type',
                {
                    pid:_this.pid,
                }, function (res) {
                    _this.proList = res.data
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        diss () {
            let _this =this
            this.$post('/api/project/project_type',
                {
                    pid:_this.dis,
                }, function (res) {
                    _this.disList = res.data
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        citys () {
            let _this =this
            this.$post('/api/project/project_type',
                {
                    pid:_this.city,
                }, function (res) {
                    _this.cityList = res.data
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        handleChange (date) {
            let dateTime = new Date(date)
            this.formItem.time = dateTime.getTime()
            console.log( this.formItem.time)
        },
        UploadUrl(){
            return  this.$Url+'/api/common/upload';
        },
        one (res){
            this.images.one=this.$Url+res.data.url
            this.imglist = res.data.url
        },
        two (res){
            this.images.two=this.$Url+res.data.url
            this.imglist = this.imglist +','+ res.data.url
        },
        tree (res){
            this.images.three=this.$Url+res.data.url
            this.imglist = this.imglist +','+res.data.url
        },
        selpro (value) {
            this.city = value
            this.citys()
        },
        selcity (value) {
            this.dis = value
            this.diss()
        },
        selc (value){
            this.por = value
            if(this.idlist == ''){
                this.idlist = value
            }else {
                this.idlist =this.idlist+','+ value
            }
        },
        add () {
            let _this = this
            this.disList.forEach(function (i) {
                if(_this.por == i.id){
                    _this.text = _this.text+i.name+','
                }
            })
        },
        subimt () {
            this.formItem.isjifen = this.checked ? 1:2;
            this.formItem.isping = this.checked1 ? 1:2;
            this.formItem.ismoney2 = this.checked2 ? 1:2;
            let _this = this

            _this.$post('/api/Diary/addDiary',
                {
                    token:_this.$token,
                    projectgroup_ids:_this.idlist,
                    time:_this.formItem.time,
                    name:_this.formItem.name,
                    hospital:_this.formItem.hospital,
                    doctor:_this.formItem.doctor,
                    yprice:_this.formItem.yprice,
                    yiprice:_this.formItem.yiprice,
                    sale:_this.formItem.sale,
                    images:_this.imglist,
                    content:_this.editorContent,
                    // symptom:1263,
                    satisfied:_this.formItem.satisfied,
                    swelling:_this.formItem.swelling,
                    pain:_this.formItem.pain,
                    scar:_this.formItem.scar,
                    isjifen:_this.formItem.isjifen,
                    isping:_this.formItem.isping,
                    iszhuan:_this.formItem.iszhuan,
                    diary_id:_this.diary_id,
                },function (res) {
                    console.log(res)
                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )

        }
    },
    mounted() {
        var editor = new E('#editorElem')
        editor.customConfig.onchange = (html) => {
            this.editorContent = html
        }
        editor.customConfig.uploadImgServer = this.$IUrl  // 上传图片到服务器
        editor.customConfig.uploadFileName = 'file';
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                var url = result.data[0]
                insertImg(url)
            }
        }
        editor.create()

    }
}
</script>

<style lang="less">
  @import "../../../style/style.less";
  .write-diary {
    border: 1px solid @border-color;
    padding: 15px !important;
    .add{
      background-color: @theme-color-dark;
      color: white;
      padding: 7px 15px;
      border-radius: 4px;
      margin-left: 5px;
      cursor: pointer;

    }
    .ivu-upload{
      margin-right: 10px;
      img{
        width: 90px;
        height: 90px;
      }
      .ivu-upload-list{
        display: none !important;
      }
    }
    .content {
      padding-top: 15px;
      .rate {
        span {
          position: relative;
          top: 3px;
        }
      }
      .selected-box {
        padding: 10px 0;
        .item {
          color: @theme-color-dark;
          background-color: @theme-color-light;
          font-size: 14px;
          height: 28px;
          line-height: 28px;
          display: inline-block;
          margin: 0 8px 4px 0;
          border-radius: 4px;
          padding: 0 10px;
          cursor: pointer;
        }
        .active {
          background-color: @theme-color-dark;
          color: #fff;
        }
      }
    }
  }
</style>
